<template>
<div class="goodDetail" id="transitionName"> 
      <div class="goodDetailList">
        <div class="header" >
            <div class="left" @click="Return">
                <i class="iconfont icon-zuojiantou"></i>
            </div>
            <div class="in">{{this.$route.query.title}}</div>
            <div class="rigth"></div>
        </div>
                        <div class="ff">
                            <div class="thetop">
                            <img v-lazy="goodDetail1.g_gallery" class="">
                            <div class="sbtitle"><span class="pin">拼</span>{{goodDetail1.g_title}}</div>
                            <div class="zhekou_l fl">
                                <span class="price">￥{{goodDetail1.g_quanhou/100}}</span>
                                <span class="tip">券后价</span>
                                <span class="price_old">原价￥{{goodDetail1.g_min_group_price/100}}</span>
                            </div>
                            <div class="zhekou_r fr">
                                已拼{{goodDetail1.g_sold}}单
                            </div>
                        
                        </div>
                         
                        <div class="detail">
                            <div class="lingquan">
                            <div class="quan_l fl">
                                <p>{{goodDetail1.g_coupon_discount/100}}元优惠券</p>
                                <p class="time">{{goodDetail1.g_coupon_start_time | formatDate}}-{{goodDetail1.g_coupon_end_time | formatDate}}</p>
                            </div>
                            <div class="quan_r fr">
                                <p>领取</p>
                            </div>
                        </div>
                        <div class="tuijian">
                                <span class="tuijian_tip">推荐</span><span>{{goodDetail1.g_description}}</span>
                        </div>
                        </div>
                        </div>
                        <div  v-for="(goodDetail) in goodDetail" :key="goodDetail.index"  class="goodDetailPaid">
                             <img v-lazy="goodDetail.url" class="sb_pic fl">
                        </div>
                    </div>

                    <Detail-Layer></Detail-Layer>
                  
                    <div class="goodDetailBox">
                       
                    </div>


                    <div class="goodDetailFooter">
                        <div class="left">
                            <router-link  to="/home" tag="li">
        <div class="index">
          <i class=""> 
             <img class="quan_pic fl" src="/static/img/common_home.png">
          </i>
        </div>
        <span>首页</span>
      </router-link>
                    
                        </div>
                        <div class="rigth">
                            <div class="add">
                                <a href="javascript:void(0);" @click="share(goodDetail1.g_num_iid)">￥{{goodDetail1.g_zhuansheng}}<br>分享赚</a>
                            </div>
                            <div class="purchase">
                                <a href="javascript:void(0);" @click="pay(goodDetail.id,goodDetail.homeValue)">￥{{goodDetail1.g_zhuansheng}}<br>自买省</a>
                            </div>
                        </div>
                       
                    </div>
                    
                </div>
      <!-- </div> -->
  <!-- </div> -->
</template>
<script >
import { Toast,MessageBox,Navbar,TabItem,TabContainer,TabContainerItem } from "mint-ui";
import { mapGetters, mapMutations } from "vuex";
import DetailHeader from "./component/DetailHeader";
import DetailLayer from "./component/DetailLayer";
import {formatDate} from './date.js';
import axios from "axios";
export default {
  name: "goodDetail",
  data() {
    return {
    //   active: "1",
    //   selected: "tab-container1",
      goodDetail: [],
      goodDetail1: {}
    //   cartlength: 0
    };
  },
  filters: {
      formatDate(time) {
        var date = new Date(time*1000);
        return formatDate(date, 'yyyy-MM-dd');
        }
    },
  components: {
    DetailHeader,
    DetailLayer
  },
  computed: {
    // ...mapGetters(
    //     ["this.$store.state.carts"],
    //     ["this.$store.state.todos"],
    //     ["this.$store.state.collection"],
    //     ["this.$store.state.ces"]
    // )
  },
  mounted() {
    var num =this.$route.query.num_iid;
    this.getData(num)
  },
  created() {
    var _this = this;
    var num =this.$route.query.num_iid;
  },
  methods: {     
       share:function(num){
            var _this=this
            // num =this.$route.query.num_iid;         
            this.$router.push({ path: "toshare",
             query: { 
                id:num
                    } 
                });
        },
       getData:function(num){
       var _this=this
       axios.get(
          "/api/common/goodspdd/goodscontent",
          {
              params: {
                  num_iid:num
                  
                  }
          }
        ).then(function(res){
        // console.log(res)
        _this.goodDetail=res.data.data
      })
      
      axios.get(
          "/api/common/goodspdd/detail",
          {
              params: {
                  num_iid:num          
                  }
          }
      ).then(function(res){
        //   console.log(res)
        _this.goodDetail1=res.data.data
      })      
    },
    Return() {
        this.$router.go(-1)
     },
    //返回上一级
    fanhui: function() {
      this.$router.go(-1);
    },
    pay: function(id,value) {
        console.log(value)
        this.$router.push({
            path:"pay",
            query:{
                id:id,
                value:value
            }
        })
    }
  }
};
</script>

<style lang="stylus" >
 .header
        width 100%
        height 1.1rem
        z-index 1
        position fixed
        background #ff4040
        color #fff
       
        .in
            width 60%
            height 100%
            line-height 1.1rem
            float left
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
            text-align center
            font-size 0.45rem
        .left
            width 10%; 
            height 100%
            float left
            i 
                font-size: 0.6rem;
                line-height: 1.1rem;
                text-align: center;
                display: block;
        .rigth
            width 10%; 
            height 100%
            float left
.thetop{
    padding-top 1.1rem
    padding-bottom 1rem
    margin-bottom .2rem
    background-color #fff
}
.sbtitle{
    font-size .33rem
    padding 0 .24rem
    margin-top .2rem
    line-height .55rem
}
.sbtitle .pin{
    background-color #ff4040
    padding 0 .3rem
    color #fff
    border-radius .2rem
    margin-right .2rem
}
.zhekou_l,.zhekou_r{
    font-size .3rem
    color #898989
    padding-left .2rem
    padding-right .4rem
    line-height .6rem
}
.zhekou_l .price{
    color #ff4040
    font-size .55rem
    vertical-align middle
}
.zhekou_l .tip{
    display inline-block
    width 1.3rem
    h.5rem
    color #fff
    border-radius .1rem
    padding-left .2rem
    margin 0 .2rem
    line-height .45rem
    background center url("/static/img/bg_ticket_text.png") 
    background-size cover
}
.lingquan{
    height 2.8rem
    border-radius .28rem
    margin 0 auto
    width 89%
    background center url("/static/img/bg_coupon.png") 
    background-size cover
    font-size .4rem
    color #fff
    line-height .8rem
    text-align center
}
.quan_l {
    padding-top .59rem
    padding-left 1.4rem  
    text-align center
        
}
.quan_l .time{
    font-size .2rem
}
.quan_r{
    line-height 2.8rem
    padding-right .9rem
}
.detail{
    background-color #fff
    padding .2rem 0
}
.tuijian{
    width 89%
    margin 0 auto
    background-color rgba(0,0,0,0.04)
    // height 2rem
    font-size .3rem
    line-height .45rem
    margin-top .3rem
}
.tuijian_tip{
    display inline-block
    padding 0 .2rem
    color #fff
    border-radius .2rem
    background-color #ff4040
    margin 0 .2rem
}
img{
    width 100%
}
.peizhi {
    width: 90%;
    margin: auto;
    div{
        margin-bottom .5rem;
        margin-top .5rem;
    }
    h3 {
        height: 2rem;
        line-height: 2.3rem;
        font-size: 0.5rem;
        border-bottom: 1px solid #ccc;
    }
    span {
        font-size: 0.38rem;
        color: #888;
        margin-top: .3rem;
        display: block;
    }
    p {
         height .55rem
        color: #888;
    }
}
.cartlength {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 1px;
    left: 30px;
    background: #f81301;
    border-radius: 50%;
    text-align: center;
    line-height: 15px;
    color: white;
}
.goodDetailList {
    margin-bottom: 1rem;  
}
.goodDetailHeader {
    width: 100%;
    z-index: 1;
    height: 1.3rem;
    line-height: 1.3rem;
    font-size: 12px;
    background: white;
    position: fixed;
    box-shadow: 0 0 10px #cecece;
    text-align: center;
    font-size: 0.41rem;
}

.goodDetailHeader i {
    display: block;
    float: left;
    height: 50px;
    padding-left: 0.3rem;
    font-size: 0.71rem;
    color: black;
}

.goodDetaiSwipe {
    height: 8rem;
    margin-top: 3px;
    background: white;
}

.goodDetaiSwipe img {
    width: 70%;
    height: 7rem;
    display: block;
    margin: auto;
}

.goodDetailName {
    color: black;
    font-weight: 400;
    font-size: 0.5rem;
    line-height 1rem
}

.goodDetailPaid {
    color: #f81200;
    font-size: 0.7rem;
    margin-top: 0.1rem;
}

.goodDetailFooter {
    position: fixed;
    width: 100%;
    bottom: 0rem;
    height: 1.2rem;
    background: #F6F4F7;
    padding-top .1rem
    border-top: 1px solid #efefef;

    .left {
        width: 25%;
        float: left;
        position: relative;
        font-size: .16rem;
        padding-left 1rem
        
    }

    .rigth {
        width: 65%;
        float: right;

        .add {
            a {
                display: block;
                width: 40%;
                height: .85rem;
                line-height: .38rem;
                text-align: center;
                background: #000;
                color: white;
                font-size: 0.16rem;
                float: left;
                border-radius .16rem
            
            }
        }

        .purchase {
            a {
                border-radius .16rem
                float: right ;
                margin-right .3rem
                display: block;
                width: 40%;
                height: .85rem;
                line-height: .38rem;
                text-align: center;
                color: white;
                font-size: 0.16rem;
                background: #ff4040;
            }
        }
    }
}


.goodDetailImg {
    margin-top: 4px;
    margin-bottom: 6px;
}

.goodDetailImg img {
    width: 100%;
    height: auto;
    display: block;
}

table td {
    font-size: 0.31rem;
    text-align: center;
    color: #000;
}

.goodDetailValue {
    height: 2rem;
    border-bottom: 1px solid #cecece;
    padding: 0.4rem;
}

.goodDetailAdd {
    width: 1rem;
    height: 0.8rem;
    line-height: 0.8rem;
    display: block;
    background: white;
    float: left;
    border: 1px solid #b2b2b2;
    border-left: none;
    text-align: center;
    font-size: 0.5rem;
    color: black;
}

.goodDetailReduce {
    width: 1rem;
    height: 0.8rem;
    line-height: 0.8rem;
    display: block;
    background: white;
    float: left;
    border: 1px solid #b2b2b2;
    border-right: none;
    text-align: center;
    font-size: 0.5rem;
    color: black;
}

._cartNumber input {
    width: 1rem;
    height: 0.8rem;
    line-height: 0.8rem;
    float: left;
    border: 1px solid #b2b2b2;
    text-align: center;
    color: black;
}

._Value {
    float: left;
    margin-top: 0.2rem;
    font-size 0.35rem
}

.goodDetailColor {
    display: none;
}
i 
          display inline-block;
          width .6rem;
          height .6rem;
          img 
            width 100%;
            height  100%;
</style>
